// pages/share_match/index.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    visible: false,//是否已经生成完成

    matchTopBg: '', // 顶部背景图（赛事图片）
    matchTopModelBg: '', //遮罩图
    shareTitle: '', //头部分享文字图片
    matchBottomBg: '', // 底部背景图
    shareEwm: '', // 底部分享二维码
    nickName: '', //用户名称
    avatarUrl: '', //用户头像
    matchName: ' ', //赛程名称
    matchData: '', //赛程地址+' / '+时间
    sharePath: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let u = wx.getStorageSync('userInfo')
    var pages = getCurrentPages(); //页面指针数组
    var prepage = pages[pages.length - 2]; //上一页面指针
    let d = prepage.data
    // console.log(d)
    let address = d.shortAddress
    this.setData({
      nickName: u.nickName, //名称
      avatarUrl: u.avatarUrl, //头像
      matchTopBg: d.images[0], //赛事背景图
      matchName: d.matchName,
      matchData: d.shortAddress.replace(/\,/g, ' · ') + ' / ' + d.showTimeStart.replace(/\./g, ' · '),
      shareEwm: d.qrCode //二维码图
    })
    app._getSettingInfo(data => {
      this.setData({
        matchTopModelBg: data.shareTopModel,
        matchBottomBg: data.shareBottomBg,
        shareTitle: data.shareTitle
      })
      this.drawPic()
    })
  },
  drawPic() {
    // console.time('getTime');
    if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
      this.setData({
        visible: true
      })
      this.triggerEvent('initData')
      return
    }
    wx.showLoading({title: '生成中'})
    let {matchTopBg,matchTopModelBg,shareTitle,matchBottomBg, shareEwm,nickName,avatarUrl,matchName,matchData} = this.data
    this.setData({
      imgDraw: {
        width: '686rpx',
        height: '738rpx',
        views: [
          {
            type: 'image',
            url: matchTopBg,
            css: {
              top: '0',
              left: '0',
              width: '686rpx',
              height: '530rpx',
              borderRadius: '24rpx 24rpx 0 0',
            },
          },
          {
            type: 'image',
            url: matchTopModelBg,
            css: {
              top: '0',
              left: '0',
              width: '686rpx',
              height: '530rpx',
              borderRadius: '24rpx 24rpx 0 0'
            }
          },
          {
            type: 'image',
            url: avatarUrl,
            css: {
              top: '24rpx',
              left: '24rpx',
              width: '88rpx',
              height: '88rpx',
              borderWidth: '3rpx',
              borderColor: '#FFF',
              borderRadius: '44rpx'
            }
          },
          {
            type: 'text',
            text: nickName,
            css: {
              top: '24rpx',
              left: '128rpx',
              fontSize: '32rpx',
              color: '#fff'
            }
          },
          {
            type: 'image',
            url: shareTitle,
            css: {
              top: '76rpx',
              left: '128rpx',
              height: '40rpx',
            }
          },
          {
            type: 'text',
            text: matchName,
            css: {
              top: '350rpx',
              left: '24rpx',
              width: '638rpx',
              maxLines: 2,
              fontWeight: 'bold',
              fontSize: '36rpx',
              lineHeight: '50rpx',
              color: '#fff'
            }
          },
          {
            type: 'text',
            text: matchData,
            css: {
              top: '466rpx',
              left: '24rpx',
              width: '638rpx',
              maxLines: 1,
              fontWeight: 'bold',
              fontSize: '28rpx',
              color: '#fff'
            }
          },
          {
            type: 'image',
            url: matchBottomBg,
            css: {
              top: '530rpx',
              left: '0',
              width: '686rpx',
              height: '208rpx',
              borderRadius: '0 0 24rpx 24rpx'
            }
          },
          {
            type: 'image',
            url: shareEwm,
            css: {
              top: '562rpx',
              left: '490rpx',
              width: '144rpx',
              height: '144rpx',
            }
          }
        ]
      }
    })
  },
  onImgErr(e) {
    wx.hideLoading()
    wx.showToast({
      title: '生成分享图失败，请刷新页面重试',
      icon: 'none'
    })
  },
  onImgOK(e) {
    wx.hideLoading()
    this.setData({
      sharePath: e.detail.path,
      visible: true,
    })
    //通知外部绘制完成，重置isCanDraw为false
    this.triggerEvent('initData');
    // console.timeEnd('getTime');
  },
  //保存至相册
  saveImage: function () {
    if (this.data.sharePath){
      this.setData({visible: true})
      this.saveImageToPhotosAlbum(this.data.sharePath)
    } else {
      wx.showLoading({ title: '生成中' })
    }
  },
  saveImageToPhotosAlbum(img) {
    let that = this
    wx.saveImageToPhotosAlbum({
      filePath: img,
      success: function(data) {
        wx.showModal({
          title: '图片保存成功',
          content: '图片成功保存到相册了，去发圈噻~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function(res) {
            that.setData({
              canvasHidden: true
            })
          }
        })
      },
      fail: function(err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
          wx.showModal({
            title: '提示',
            content: '需要获取权限才能保存到相册',
            success(res) {
              if (res.confirm) {
                wx.openSetting({
                  success(settingdata) {
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showToast({
                        title: '获取权限成功'
                      })
                      console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '没有权限，人家很难给你保存到相册',
                        showCancel: false,
                        confirmText: '好的',
                        confirmColor: '#72B9C3',
                        success: function(res) {}
                      })
                      console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                    }
                  }
                })
              } else if (res.cancel) {
                // console.log('用户点击取消')
              }
            }
          })
        }
      }
    })
  },
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  // onUnload: function () {
  //   let { avatarUrl,shareEwm, matchBottomBg } = this.data
  //   app.removeFiles(avatarUrl, state => {//用户头像
  //     app.removeFiles(shareEwm, state => {//二维码图片
  //       app.removeFiles(matchBottomBg, state => {//分享底部背景图
  //       })
  //     })
  //   })
  // },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})